<template>
  <div class="wrap">
    <h2 class="title">历史搜索</h2>
    <ul class="list" v-if="historys.length">
      <li class="list-item"
        v-for="item in historys"
        :key="item.timestamp"
        @click="handleSelect(item.value)"
      >
        <i class="fa fa-history"></i> {{ item.value }}
      </li>
    </ul>
    <div class="action" v-if="historys.length">
      <span @click="handleClear">清除历史记录</span>
    </div>
  </div>
</template>

<script>
export default {
    name: 'SearchHistory',
    emits: ['select', 'clear'],
    props: {
        historys: {
            type: Array
        }
    },
    setup(props, {emit}) {
        const handleSelect = value => {
            emit('select', value)
        }
        const handleClear = () => {
            emit('clear')
        }
        return {
            handleSelect,
            handleClear
        }
    }
}
</script>

<style lang="scss" scoped>
.wrap{
    display: flex;
    flex-direction: column;
    border-top: 10px solid $color-grey;
    color: $color-text-secondary;
    font-size: 14px;
    .title{
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      margin: 0;
      color: $color-text-secondary;
      height: 46px;
      padding-left: 10px;
    }
    .list{
      padding-left: 10px;
      &-item{
        display: flex;
        align-items: center;
        height: 44px;
        @include border1px(#ccc, 0 0 1px);
        color: $color-text-regular;
        .fa{
          color: $color-text-secondary;
          margin-right: 5px;
        }
      }
    }
    .action{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 46px;
    }
  }
</style>